<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>选择银行</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			body,
			html {
				width: 100%;
				height: 100%;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: #666;
			}

			#header {
				/* position: fixed;
				z-index: 99;
				left: 0;
				top: 0; */
				width: 100%;
				height: 58px;
				background: #fff;
				display: flex;
				align-items: center;
				padding: 0 10px;
				display: flex;
				justify-content: space-between;
				box-shadow: 0 0 3px 1px #ccc;
			}

			#header div:nth-of-type(1) {
				display: flex;
				align-items: center;
			}

			#header div:nth-of-type(1) img {
				width: 14px;
				margin-right: 5px;
			}

			#header div:nth-of-type(1) span {
				font-weight: bold;
				font-size: 16px;
			}

			#header div:nth-of-type(2) img {
				width: 138px;
			}

			#search {
				width: 100%;
				height: 68px;
				background: #f1f1f1;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			#search input {
				width: 88%;
				height: 42px;
				background: #fff;
				border: 1px solid #f3f3f3;
				border-radius: 40px;
				font-size: 16px;
				text-align: center;
				outline: none;
			}

			#hot {
				width: 100%;
				background: #fff;
			}

			#hot h4 {
				color: #000;
				font-weight: bold;
				height: 40px;
				line-height: 40px;
				padding-left: 3%;
			}

			#hot .hot-list {
				width: 100%;
				height: 58px;
				display: flex;
				align-items: center;
				padding-left: 3%;
				border-bottom: 1px solid #f1f1f1;
			}

			#hot .hot-list img {
				width: 32px;
				height: 32px;
				margin-right: 8px;
			}
			
			.indexed-list h2 {
				background-color: #f7f7f9;
				color: #333;
				line-height: 40px;
				text-indent: 15px;
				font-size: 1.143rem;
				position: sticky;
				top: 0;
			}

			.indexed-list dd {
				line-height: 44px;
				background-color: #fff;
				height: 58px;
				padding: 0 15px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f1f1f1;
			}
			.indexed-list dd:last-of-type {
				border-bottom: none;
			}

			.indexed-list dd a {
				display: block;
				flex: 1;
				color: #333;
			}
			
			.indexed-list dd img {
				width: 32px;
				height: 32px;
				display: inline-block;
				margin-right: 8px;
			}

			.indexed-list dd:last-child a {
				border-bottom: 0 none;
			}

			.indexed-nav {
				background-color: rgba(0, 0, 0, .1);
				position: fixed;
				top: 50%;
				right: 5px;
				z-index: 99;
				color: #666;
				font-size: .85rem;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}

			.indexed-nav li {
				padding: 4px;
				width: 24px;
				height: 34px;
				text-align: center;
			}

			.indexed-nav li.active {
				font-weight: bold;
				color: #000;
			}

			#hhb_prompt {
				position: fixed;
				left: 50%;
				top: 50%;
				z-index: 10;
				margin: -30px 0 0 -30px;
				width: 60px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				font-size: 30px;
				color: #fff;
				background: rgba(0, 0, 0, .5);
				border-radius: 4px;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div id="goReturn">
				<img src="static/images/xiangzuojiantou.png" alt="" />
				<span>选择银行</span>
			</div>
			<div><img src="static/images/yl-logo.png" alt="" /></div>
		</div>
		<div id="search">
			<input type="text" placeholder="请输入关键字" />
		</div>
		<div id="hot">
			<h4>热门</h4>
			<div class="hot-box">
				<!-- 热门银行列表 -->
			</div>
		</div>
		<!-- wrapper -->
		<div id="list-wrapper">
			<!-- 主列表 -->
			<ul class="indexed-list"></ul>

			<!-- 右侧导航列表 -->
			<ul class="indexed-nav"></ul>
		</div>

		<!-- js -->
		<script src="static/js/zepto.min.js"></script>
		<script src="static/js/indexedList.min.js"></script>
		<script>
			// 热门银行列表
			var hotBankList = [{
				"label": "平安银行",
				"value": "12323",
				"icon": "static/images/bank-logo/payh.webp"
			}, {
				"label": "农业银行",
				"value": "1232213",
				"icon": "static/images/bank-logo/nyyh.webp"
			}, {
				"label": "中国银行",
				"value": "12323333",
				"icon": "static/images/bank-logo/zgyh.webp"
			}]

			initHotBankList(hotBankList);

			function initHotBankList(hotBankList) {
				var hotList = ``;
				hotBankList.forEach((item) => {
					hotList += `<div class="hot-list" data-value="${item.value}" data-icon="${item.icon}" data-label="${item.label}">
						<img src="${item.icon}" alt="" />
						<span>${item.label}</span>
					</div>`
				})
				$('#hot .hot-box').html(hotList);
				
				
				// 获取热门银行
				$(".hot-list").on("click", function() {
					let data = {
						label: $(this).attr("data-label"),
						value: $(this).attr("data-value"),
						icon: $(this).attr("data-icon")
					}
					window.localStorage.setItem('bankInfo', JSON.stringify(data));
					window.location.href = "submit.html";
				});
				
				
			}

			// 返回页面
			$("#goReturn").on("click", function() {
				window.location.href = "submit.html";
			});
			// 选择银行获取attr属性银行代码
			$("#list-wrapper .indexed-list").on("click", "dd", function() {
				let data = {
					label: $(this).attr("data-label"),
					value: $(this).attr("data-value"),
					icon: $(this).attr("data-icon")
				}
				window.localStorage.setItem('bankInfo', JSON.stringify(data));
				window.location.href = "submit.html";
			});
			// 监听input框变化
			$("#search input").on("input", function() {
				var val = $(this).val();
				var arr = [];
				data.forEach((item) => {
					item.lists.forEach((i) => {
						if (i.label.includes(val)) {
							arr.push(i);
						}
					})
				})
				if (val) {
					$('h4').text('搜索');
					initHotBankList(arr);
				} else {
					$('h4').text('热门');
					initHotBankList(hotBankList);
				}
			});


			//模拟数据 - Tips: 请按以下格式生成数据
			const data = [{
					label: 'B',
					lists: [{
						"label": "北京银行",  // 银行名称
						"value": "1111", // 银行代码
						"icon": "static/images/bank-logo/bjyh.webp"  // 银行logo
					}]
				},
				{
					label: 'C',
					lists: [{
						"label": "重庆银行",
						"value": "222",
						"icon": "static/images/bank-logo/cqyh.webp"
					}, {
						"label": "成都农商银行",
						"value": "33333333",
						"icon": "static/images/bank-logo/cdnsyh.webp"
					}]
				},
				{
					label: 'G',
					lists: [{
						"label": "广发银行",
						"value": "333",
						"icon": "static/images/bank-logo/gfyh.webp"
					}, {
						"label": "光大银行",
						"value": "444",
						"icon": "static/images/bank-logo/gdyh.webp"
					}]
				},
				{
					label: 'H',
					lists: [{
						"label": "华夏银行",
						"value": "555",
						"icon": "static/images/bank-logo/hxyh.webp"
					}]
				},
				{
					label: 'J',
					lists: [{
						"label": "建设银行",
						"value": "55665",
						"icon": "static/images/bank-logo/jsyh.webp"
					}, {
						"label": "交通银行",
						"value": "6745234",
						"icon": "static/images/bank-logo/jtyh.webp"
					}]
				},
				{
					label: 'M',
					lists: [{
						"label": "民生银行",
						"value": "3123523",
						"icon": "static/images/bank-logo/msyh.webp"
					}]
				},
				{
					label: 'N',
					lists: [{
						"label": "农业银行",
						"value": "5432423",
						"icon": "static/images/bank-logo/nyyh.webp"
					}]
				},
				{
					label: 'P',
					lists: [{
						"label": "浦发银行",
						"value": "31232",
						"icon": "static/images/bank-logo/pfyh.webp"
					}, {
						"label": "平安银行",
						"value": "123123",
						"icon": "static/images/bank-logo/payh.webp"
					}]
				},
				{
					label: 'S',
					lists: [{
						"label": "四川农信",
						"value": "32143323",
						"icon": "static/images/bank-logo/scnx.webp"
					}, {
						"label": "上海银行",
						"value": "54667",
						"icon": "static/images/bank-logo/shyh.webp"
					}, {
						"label": "苏州农商银行",
						"value": "9896",
						"icon": "static/images/bank-logo/sznsyh2.webp"
					}, {
						"label": "深证农商银行",
						"value": "7645868",
						"icon": "static/images/bank-logo/sznsyh.webp"
					}, {
						"label": "苏州银行",
						"value": "36556",
						"icon": "static/images/bank-logo/szyh.webp"
					}]
				},
				{
					label: 'X',
					lists: [{
						"label": "兴业银行",
						"value": "34546",
						"icon": "static/images/bank-logo/xyyh.webp"
					}]
				},
				{
					label: 'Y',
					lists: [{
						"label": "邮政银行",
						"value": "5345",
						"icon": "static/images/bank-logo/yzyh.webp"
					}]
				},
				{
					label: 'Z',
					lists: [{
						"label": "中国银行",
						"value": "6547675",
						"icon": "static/images/bank-logo/zgyh.webp"
					}, {
						"label": "中信银行",
						"value": "87645",
						"icon": "static/images/bank-logo/zxyh.webp"
					}, {
						"label": "招商银行",
						"value": "9874",
						"icon": "static/images/bank-logo/zsyh.webp"
					}, {
						"label": "浙商银行",
						"value": "8674534",
						"icon": "static/images/bank-logo/zsyh.webp"
					}]
				}
			];

			//调用插件
			$(() => $.indexedList({
				el: '.indexed-list', //主列表DOM [选填，默认值：.indexed-list]
				elNav: '.indexed-nav', //右侧列表DOM [选填，默认值：.indexed-nav]
				datas: data //自定义的数据 [必填，默认为空数组]
			}));
		</script>
	</body>
</html>